<template>
    <div>
        <van-nav-bar title="登录" />
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" 
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button  block type="info" native-type="submit" color="#FA6D1D">登录</van-button>
            </div>
            <div class="text-right">
                <router-link to="/register">注册账号</router-link>
            </div>
        </van-form>
    </div>
</template>

<script>
import { login } from "@/api/user";
import { Notify } from "vant";
import { saveToken } from "@/utils/token";
export default {
  data() {
    return {
      username: 'admin1234',
      password: 'admin1234',
    };
  },
  methods: {
     onSubmit(values) {
      console.log(values);
       login({
        username:this.username,
        password:this.password
       }).then(value=>{
          // 提示用户，登录成功
          Notify({ type: "success", message: "登录成功" });
            // 存储token
            console.log(value.data.data.token);
            saveToken(value.data.data.token);
            this.$router.push("/footer");
        }).catch(err=>{
            console.log(err);
        })
    },
  },
};

</script>

<style lang="scss" scoped>
    .text-right{
        margin-right: 30px;
        font-size: 30px;
        text-align: right;
    }
</style>